<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">开始 {{ stratTime }}</span>
      <el-date-picker :value-format="valuFormat" v-model="stratTime" type="datetime"
        :disabled-date="disabledDate1" :disabled-hours="disabledHours1"
        :disabled-minutes="disabledMinutes1" :disabled-seconds="disabledSeconds1" />
    </div>

    <div class="block">
      <span class="demonstration">结束 {{ endTime }}</span>
      <el-date-picker :value-format="valuFormat" v-model="endTime" type="datetime"
        :disabled-date="disabledDate2" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      stratTime: '',
      endTime: '',
      valuFormat: 'YYYY-MM-DD HH:mm:ss'
    }
  },
  methods: {
    disabledDate1(date) {
      if (!this.endTime) return false;
      const endTime = new Date(this.endTime);
      date.setHours(endTime.getHours());
      date.setMinutes(endTime.getMinutes());
      date.setSeconds(endTime.getSeconds());
      const r = endTime - date
      return r < 0 || r > 24 * 3600 * 1000;
    },

    disabledDate2(date, t) {
      if (!this.stratTime) return false;
      const stratTime = new Date(this.stratTime);
      date.setHours(stratTime.getHours());
      date.setMinutes(stratTime.getMinutes());
      date.setSeconds(stratTime.getSeconds());
      const r = date - stratTime
      return r < 0 || r > 24 * 3600 * 1000;
    },

    disabledHours1() {
      if (!this.endTime) return [];
      const arr = [];
      const endTime = new Date(this.endTime);
      const stratTime = new Date(this.stratTime);
      for (let i = 0; i <= 23; i++) {
        stratTime.setHours(i);
        stratTime.setMinutes(endTime.getMinutes());
        stratTime.setSeconds(endTime.getSeconds());
        const r = endTime - stratTime
        if (r < 0 || r > 24 * 3600 * 1000) {
          arr.push(i);
        }
      }
      return arr;
    },
    disabledMinutes1() {
      if (!this.endTime) return [];
      const arr = [];
      const endTime = new Date(this.endTime);
      const stratTime = new Date(this.stratTime);
      for (let i = 0; i <= 59; i++) {
        stratTime.setHours(endTime.getHours());
        stratTime.setMinutes(i);
        stratTime.setSeconds(endTime.getSeconds());
        const r = endTime - stratTime
        if (r < 0 || r > 24 * 3600 * 1000) {
          arr.push(i);
        }
      }
      return arr;
    },
    disabledSeconds1() {
      if (!this.endTime) return [];
      const arr = [];
      const endTime = new Date(this.endTime);
      const stratTime = new Date(this.stratTime);
      for (let i = 0; i <= 59; i++) {
        stratTime.setHours(endTime.getHours());
        stratTime.setMinutes(endTime.getSeconds());
        stratTime.setSeconds(i);
        const r = endTime - stratTime
        if (r < 0 || r > 24 * 3600 * 1000) {
          arr.push(i);
        }
      }
      return [1, 2, 3];
    },
  }
}
</script>
<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
